<template>
  <div class="master-detail-wrapper">
    <div class="master-info">
      <div class="avatar-wrapper">
        <img class="avatar-image" alt="" :src="master.avatar" />
        <div class="level-wrapper">
          <p v-if="master.level">{{ master.level.name[0] }}</p>
        </div>
      </div>
      <div class="info-wrapper">
        <div class="info-content">
          <p class="name">{{ master.realname }}</p>
          <span class="info">{{ master.title }}</span>
          <p class="info"> {{ master.answer_count }}回答 &nbsp;&nbsp; {{ master.fans_count }} 粉丝</p>
        </div>
      </div>
      <div class="info-button-wrapper">
        <span v-if="!is_follow" @click="follow" class="follow-btn btn-yellow">关注</span>
        <span v-else @click="unfollow" class="follow-btn btn-yellow">取消关注</span>
      </div>
      <div class="intro-wrapper">
        <p>{{ master.intro }}</p>
      </div>
      <div class="master-tags">
        <span v-if="master.catalog" class="tag-item">{{ master.catalog.name }}</span>
      </div>
      <div class="ask-btn-wrapper">
        <button @click="ask" class="btn btn-yellow">￥{{ master.price }} 请教</button>
      </div>
    </div>
    <div class="question-answer-wrapper">
      <div class="question-answer-header">
        <span class="title">问答</span>
        <span class="desc">回答{{ master.answer_count }}</span>
      </div>
      <ul class="answers-list">
        <li v-for="(item, index) in answerData.results" class="question-answer-item">
          <div class="main-content" @click="viewQuestionDetail(index)">
            <div class="avatar-wrapper">
              <img :src="item.question.asker.avatar" alt="" />
            </div>
            <div class="text-wrapper">
              <span>{{ item.question.text }}</span>
            </div>
          </div>
          <div class="main-content">
            <div class="avatar-wrapper">
              <img :src="item.replier.avatar" alt="" />
            </div>
            <div class="answer-bubble">
              <bubble @payed="payAnswer" :audioUrl="item.audio" :type="1" reward="1" :seconds="item.audio_length" :objectId="item.id" :index="index"></bubble>
            </div>
          </div>
          <div class="content-footer">
            <span>{{ item.dateStr }}</span>
            <span class="right-text">听过 {{ item.glance_count }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import { mapGetters } from 'vuex'

export default {
  name: 'MasterDetail',
  data () {
    return {
      id: this.$route.params.id,
      master: {},
      is_follow: false,
      answerData: { results: [] }
    }
  },
  created () {
    if (typeof(this.$route.params.master ) == 'undefined') {
      this.getMaster()
    } else {
      this.master = this.$route.params.master
      this.checkFollowStatus()
    }
    this.getAnswers()
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'isLogin'
    ])
  },
  methods: {
    getMaster() {
      var url = '/users/' + this.id + '/'
      var that = this
      // 调用登陆接口
      this.axios.get(url)
      .then(function (res) {
        that.$toast.clear()
        if (res.status === 200) {
          that.master = res.data
          that.checkFollowStatus()
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
    checkFollowStatus: function() {
      var that = this
      var url = '/users/is_follow/'
      this.$toast.loading()
      var params = { user_id: this.id }
      console.log(params)
      this.axios.post(url, qs.stringify(params))
      .then(function(res) {
        that.$toast.clear()
        console.log(res.data)
        if (res.data.is_follow) {
          that.is_follow = true
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        if (error.response) {
          that.$toast.fail(error.response.data.detail)
        } else {
          that.$toast.fail('请求出错')
        }
      })
    },
    follow: function() {
      console.log(this.master)
      var that = this
      var url = '/users/' + this.id + '/follow/'
      this.$toast.loading()
      this.axios.post(url)
      .then(function(res) {
        that.$toast.clear()
        if (res.status >= 200 && res.status < 300) {
          that.is_follow = true
          return that.$toast.success('关注成功')
        } else {
          return that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        that.$toast.fail('请求出错')
      })
    },
    unfollow: function() {
      var that = this
      var url = '/users/' + this.id + '/unfollow/'
      this.$toast.loading()
      this.axios.post(url)
      .then(function(res) {
        that.$toast.clear()
        if (res.status >= 200 && res.status < 300) {
          that.is_follow = false
          return that.$toast.success('取消关注成功')
        } else {
          return that.$toast.fail(res.msg)
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        that.$toast.fail('请求出错')
      })
    },
    ask: function() {
      if (this.userInfo.id == this.master.id) {
        return this.$toast('不能向自己请教')
      }
      // 去请教
      var params = { type: 2, master: this.master }
      this.$router.push({ name: 'questionRelease', params: params })
    },
    getAnswers(next=null) {
      var url = '/dianping/answer/?replier=' + this.id
      if (next) {
        url = next
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      // 调用登陆接口
      this.axios.get(url)
      .then(function (res) {
        console.log(res)
        that.$toast.clear()
        if (res.status === 200) {
          that.answerData.results = res.data.results
          that.answerData.previous = res.data.previous
          that.answerData.next = res.data.next
          that.answerData.count = res.data.count
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
    payAnswer: function(index) {
      var answer = this.answerData.results[index] 
      answer.isBought = true
    },
    viewQuestionDetail: function(index) {
      var question = this.answerData.results[index].question
      var params = { question: question, id: question.id }
      this.$router.push({ name: 'questionDetail', params: params })
    }
  }
}

</script>

<style lang="scss" scoped>
@import '../../assets/style/const.scss';

.master-info {
  padding: .5rem .75rem;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  .avatar-wrapper {
    width: 3rem;
    height: 3rem;
    display: inline-block;
    position: relative;
    .avatar-image {
      width: 100%;
      height: 100%;
      border-radius: 1.5rem;
    }
    .level-wrapper {
      position: absolute;
      bottom: 0;
      right: 0;
      width: .8rem;
      height: .8rem;
      background: $color-red;
      border-radius: .4rem;
      text-align: center;
      p {
        height: .8rem;
        line-height: .8rem;
        font-size: .5rem;
        color: #fff;
      }
    }
  }
  .info-wrapper {
    width: 7.5rem;
    height: 3rem;
    display: inline-block;
    overflow: hidden;
    margin-left: 1rem;
    position: relative;
    .info-content {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      .name {
        font-size: .7rem;
        font-weight: bold;
        line-height: 1rem;
        height: 1rem;
        color: #4A4A4A;
        text-align: left;
      }
      .info {
        overflow: hidden;
        font-size: .6rem;
        color: #AAAAAA;
        height: 1rem;
        line-height: 1rem;
      }
    }
  }
  .intro-wrapper p {
    font-size: .6rem;
    color: #4A4A4A;
    line-height: 1rem;
  }
  .info-button-wrapper {
    padding-top: 1.3rem;
    height: 1.4rem;
    position: absolute;
    right: .75rem;
    top: 0;
    .follow-btn {
      height: 1.4rem;
      line-height: 1.4rem;
      padding: 0 .5rem;
      text-align: center;
      border-radius: .7rem;
      font-size: .6rem;
      color: #FFFFFF;
      display: inline-block;
    }
  }
  .master-tags {
    color: $color-text-desc;
    width: 75%;
    margin-top: .4rem;
    .tag-item {
      padding: 1px 3px;
      border: 1px solid $color-text-desc;
      border-radius: 4px;
      font-size: .6rem;
      text-align: center;
    }
  }
  .ask-btn-wrapper {
    margin: .75rem 0 .25rem;
  }

}

.question-answer-wrapper {
  margin-top: .5rem;
  .question-answer-header {
    background: #fff;
    padding: .5rem .75rem;
    .title {
      color: $color-text-strong;
      display: block;
      height: 1rem;
      line-height: 1rem;
    }
    .desc {
      color: $color-text-desc;
      display: block;
      font-size: .6rem;
      height: .8rem;
      line-height: .8rem;
    }
  }
}

.question-answer-item {
  background: #fff;
  margin-top: 2px;
  box-sizing: border-box;
  padding: .5rem .75rem;
  .main-content {
    position: relative;
    padding: 2px 0;
    .avatar-wrapper {
      display: inline-block;
      width: 15%;
      margin: .2rem 0;
      text-align: center;
      vertical-align: top;
      img {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: .75rem;
      }
    }
    .text-wrapper {
      width: 80%;
      color: $color-text-normal;
      font-size: .6rem;
      display: inline-block;
    }
    .answer-bubble {
      width: 80%;
      margin: .2rem 0;
      display: inline-block;
    }
  }
  .content-footer {
    position: relative;
    top: 5px;
    font-size: .6rem;
    padding: 5px 0;
    color: $color-text-normal;
    .right-text {
      float: right;
    }
  }
}

</style>
